<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title><spring:message code="message.jieSuan.zhiFuDanGuanLi"/>   <spring:message code="message.jieSuan.zhiFuDanMingXi"/> <spring:message code="message.jqGrid.cz.xiangQing"/></title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp"%>
    <style type="text/css">
     @media(max-width:767px){
            .form-group-xs{
            margin-left:0px !important;
            }
        }
        div.group-info {
            margin-top: 10px !important;
            margin-bottom: 0px !important;
        }
        input.innerInput {
            width: 98%;
        }
        .text-left{
        color:#949494;
        }
    </style>
</head>
<body class="skin-blue sidebar-mini fixed skin-blue-light-frame">
    <section class="content-header">
        <h1><spring:message code="message.jieSuan.zhiFuDanMingXi"/></h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i><spring:message code="message.lable.first"/></a></li>
            <li class="active"><a href="#"><spring:message code="message.jieSuan.zhiFuDanGuanLi"/></a></li>
            <li class="active"><a href="#"><spring:message code="message.jieSuan.zhiFuDan"/><spring:message code="message.button.look"/></a></li>
        </ol>
     </section>
     
     <section class="content" style="min-height:inherit;">
     <table class="infoBox">
      <tr>
        <td width="150px" class="infoBoxleft">
        <p style="color:#fff;font-size:20px;text-align:center;font-weight:600"><spring:message code="message.jieSuan.zhiFuDan"/><spring:message code="message.listForm.xinXi"/></p>
        </td>
        <td>
        	<form id="form" class="form-horizontal"  method="post">
            <input type="hidden" id="paymentBillId" name=paymentBillId value="${payment.paymentBillId}" />
                <div class="box-body" style="background:url('${ctx }/lib/img/infobg.png') no-repeat bottom right;">
                    <div class="form-group form-group-xs"  style="margin-top:5px;">
                    <label for="inputTextAlter1" class="col-sm-2 text-right"><spring:message code="message.jieSuan.zhiFuDan"/><spring:message code="message.yanZheng.bianMa"/><spring:message code="message.yanZheng.maoHao"/></label>
                     <div class="col-sm-3 text-left" >${payment.paymentBillCode}</div>
                     <label for="inputTextAlter2" class="col-sm-2 text-right"><spring:message code="message.jieSuan.zhiFuDan"/><spring:message code="message.listForm.mingCheng"/><spring:message code="message.yanZheng.maoHao"/></label>
                     <div id="orgName" class="col-sm-3 text-left">${payment.paymentBillName}</div>
                    </div>
                    
                    <div class="form-group form-group-xs" style="margin-top:-10px">
                     <label for="inputTextAlter1" class="col-sm-2 text-right"><spring:message code="message.jieSuan.zongTiaoMuShu"/><spring:message code="message.yanZheng.maoHao"/></label>
                     <div id="outstandAmt" class="col-sm-3 text-left">${payment.totalOrders}</div>
                     <label for="inputTextAlter2" class="col-sm-2 text-right"><spring:message code="message.jieSuan.zongJinE"/><spring:message code="message.yanZheng.maoHao"/></label>
                     <div id="availableAmt" class="col-sm-3 text-left">${payment.totalAmountStr}</div>
                    </div>
                    
                   <div class="form-group form-group-xs" style="margin-top:-10px;margin-bottom:-10px;">
                     <label for="inputTextAlter1" class="col-sm-2 text-right"><spring:message code="message.lable.remark"/><spring:message code="message.yanZheng.maoHao"/></label>
                     <div id="pendingAmt" class="col-sm-9 text-left">${payment.remark}</div>
                </div>
                </div>
             </form>
        </td>
      </tr>
      </table>
       

        <div class=" box box-success">
            <div class="box-body">
                <div class=" form-inline">
        
                    <div class="form-group form-group-xs">
                        <label for="name"><spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.listForm.mingCheng"/><spring:message code="message.yanZheng.maoHao"/></label>
                        <input class="form-control" type="text" id="settlementName" name="settlementName" placeholder="<spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.listForm.mingCheng"/>" maxlength="200" />
                    </div>
                   
                   <div class="form-group form-group-xs">
                        <label for="name"><spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.yanZheng.bianMa"/><spring:message code="message.yanZheng.maoHao"/></label>
                        <input class="form-control" type="text" id="settlementCode" name="settlementCode" placeholder="<spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.yanZheng.bianMa"/>" maxlength="100" />
                    </div>
                    
                   
                    
                     <div class="form-group form-group-xs">
                                                                <spring:message code="message.jieSuan.chuangJianRiQi"/><spring:message code="message.yanZheng.maoHao"/> 
                       <input class="form-control" type="text" id="createTimeBegin"  name="createTimeBegin"  placeholder="yyyy-MM-dd"
                       onFocus="var endDate=$dp.$('crateTimeEnd');WdatePicker({maxDate:'#F{$dp.$D(\'crateTimeEnd\')}'})" />
                        -
                       <input class="form-control" type="text" id="crateTimeEnd"  name="crateTimeEnd"  placeholder="yyyy-MM-dd"
                       onFocus="WdatePicker({minDate:'#F{$dp.$D(\'createTimeBegin\')}'})"  />
                   </div>
                   
                    
                   <button id="selectWSJ"  type="button" onclick="serch();" class="btn btn-success btn-sm"><spring:message code="message.button.seachSpacing"/></button>
                    
                </div>
            </div>
        </div>
        
        <table class="jqgrid" id="gridlist"></table>
        <div id="gridpage"></div>
        <div class=" box box-warning bottongroup">
            <button type="button" onclick="window.location.href='${ctx}/payment/toSubmitPaymentList.html'" class="btn btn-default btn-sm"><spring:message code="message.button.getBackSpacing"/></button>
        </div>
   </section> 
    
   <%@ include file="/WEB-INF/component/commonJS.jsp"%>
   <script type="text/javascript">
   
   //加载页面光标在名字框内，位于第一个
   $("#settlementName").focus();
   
 //绑定回车    id="selectWSJ"  
   $('#settlementName,#settlementCode,#createTimeBegin,#crateTimeEnd').bind('keydown', function(event) {
       if (event.keyCode == "13") {        //13 位电脑上回车键的位置代码
           $('#selectWSJ').click();
       }
   }); 
   
         $(function() {
             
             
             jQuery("#gridlist").jqGrid({
                    url: "${ctx}/payment/getPaymentDetailList.html",
                    mtype: "POST",
                    datatype: "json",
                    postData:{"paymentBillId":"${paymentBillId}"},
                    autowidth: true,
                    //shrinkToFit: false,
                    height: 270,
                    colNames:[ 
                               '<spring:message code="message.jqGrid.cz"/>',
                               '<spring:message code="message.jieSuan.zhiFuDan"/>ID',
                               '<spring:message code="message.jieSuan.jieSuanDan"/>ID',
                               '<spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.yanZheng.bianMa"/>',
                               '<spring:message code="message.jieSuan.jieSuanDan"/><spring:message code="message.listForm.mingCheng"/>',
                               '<spring:message code="message.jieSuan.zongTiaoMuShu"/>',
                               '<spring:message code="message.jieSuan.zongJinE"/>',
                               '<spring:message code="message.jieSuan.chuangJianShiJian"/>', 
                               '<spring:message code="message.jieSuan.chuangJianRen"/>',
                               '<spring:message code="message.lable.remark"/>'
                               
                               ],
                    colModel:[
                        { name: 'oper', width:60, align:"center", sortable:false,
                            formatter : function(val, opts, rowdata) {
                            var str = "";
                            str += "<a href='${ctx}/payment/toSetSettlementFirstDetailList.html?paymentBillId=${paymentBillId}&settlementId="+rowdata.settlementId+"' style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat -100px 0px' class='opIcon' title='<spring:message code="message.jqGrid.cz.xiangQing"/>'></a>";
                            return str;
                           }  
                        },
                        { name: 'paymentBillId', width:100,align:"center",hidden:true,sortable:false},
                        { name: 'settlementId', width:100,hidden:true,align:"center" ,sortable:false},  
                        { name: 'settlementCode', width:210,align:"center" ,sortable:false},   
                        { name: 'settlementName', width:210,align:"left" ,sortable:false},   
                        { name: 'totalOrders', width:80,align:"center" ,sortable:false},       
                        { name: 'totalAmount', width:80,align:"right",sortable:false},
                        { name: 'createDateTime', width:140, align:"center",sortable:false},
                        { name: 'createUserName', width:160, align:"left", sortable:false},
                        { name: 'remarks', width:160, align:"center", sortable:false}
                        
                        
                    ],
                     rowNum: 20,
                     rowList: [10, 20, 50, 100],
                     rownumbers: true,
                     pager: "#gridpage",
                     viewrecords: true,
                     multiselect: true, 
                     caption: "<spring:message code="message.jieSuan.zhiFuDan"/><spring:message code="message.jqGrid.cz.xiangQing"/>",
                   //序号宽度自动变化
                     gridComplete:function(){
                         //序号列宽度自适应（参数为jqgridID）
                         autoRNWidth("gridlist");
                         //数据只有一条时默认选中（参数为jqgridID）
                         selectByOneData("gridlist");
                     },
                     jsonReader: {
                         repeatitems: false,
                         id: "ids"
                     }
                });
                
                $("#gridlist").jqGrid('navGrid', '#gridpage', { add: false, edit: false, del: false, search: false, refresh: false });
                
                $(window).trigger("resize");
                
            });
               
           //查询
           function serch() {
               var settlementCode = $.trim($("#settlementCode").val());
               var settlementName = $.trim($("#settlementName").val());
               var createTimeBegin = $.trim($("#createTimeBegin").val());
               var crateTimeEnd = $.trim($("#crateTimeEnd").val());
               $("#gridlist").jqGrid('setGridParam',{  
                   datatype:'json',
                   postData:{
                       "settlementCode":settlementCode,
                       "settlementName":settlementName,
                       "createTimeBegin":createTimeBegin,
                       "crateTimeEnd":crateTimeEnd
                   },
                   page:1
               }).trigger("reloadGrid"); //重新载入  
           }
        
           
         //删除
           function del(){
                 var rowIds = $("#gridlist").jqGrid("getGridParam", "selarrrow") || [];
                 if (rowIds.length <= 0) {
                     $.HN.message.alert("<spring:message code="message.HN.alert.pleaseSelectLine"/>", "<spring:message code="message.HN.alert.type"/>", "error");
                     return;
                 }
                 var list = [];
                 for (var i=0; i<rowIds.length; i++) {
                     rowId = rowIds[i];
                     var rowdata = $("#gridlist").jqGrid('getRowData', rowId);
                     var settlementId = rowdata.settlementId;
                     list.push({"paymentBillId":"${paymentBillId}", "settlementId":settlementId}); 
                 }
                 $.HN.message.confirm('<spring:message code="message.jieSuan.queDingShanChuMa"/>', '', '').on(function (e) {
                     if (e) {
	                     $.post("${ctx}/payment/deletePaymentDetail.html", {
	                    	  "array" : json.jsonToString(list)
	                     }, function(result) {
	                         if (result.success) {
	                             $.HN.message.alert("<spring:message code="message.HN.alert.success"/>", "<spring:message code="message.HN.alert.type"/>", "success");
	                             serch();
	                         } else {
	                             $.HN.message.alert("<spring:message code="message.HN.alert.fail"/>", "<spring:message code="message.HN.alert.type"/>", "error");
	                         }
	                     }, "json");
                     }
                 });
             }
           
           
            
    </script>
</body>
</html>